
import React from 'react';
import { Input, message } from 'antd';
import cass from 'classnames';
import s from './remark.module.less';
import ShareModal from './projectRemarkModal';

const TextArea = Input.TextArea;

class ProjectRemark extends React.Component {

    state = {
        showModal: false,
        viewer: [],
    }

    componentWillMount() {
        this.userid = window.localStorage.getItem('userId') - 0;
    }

    onChange = (e) => {
        const { info: userInfo, data, onChange } = this.props;
        const remarks = data.info.remarks;

        let myRemark = {};
        if (!remarks.length) {
            myRemark = {
                recid: '',
                content: e.target.value,
                creatorid: this.userid,
                creatorname: userInfo.realname,
                viewer: [],
            }
            onChange([{ ...myRemark }]);
            return;
        }

        // 做去重处理 并且找出当前
        let newRemark = [];
        const obj = {};
        remarks.forEach(v => {
            if (!obj[v.creatorid]) {
                newRemark.push(v);
                obj[v.creatorid] = v.creatorid;
            }
        });

        const currentIdx = newRemark.findIndex(r => r.creatorid === this.userid);

        if (currentIdx !== -1) {
            newRemark[currentIdx].content = e.target.value;
        } else {
            newRemark.push({
                recid: '',
                content: e.target.value,
                creatorid: this.userid,
                creatorname: userInfo.realname,
                viewer: [],
            });
        }
        onChange(newRemark);
    }

    onViewerChange = (selViewer) => {
        const { data, onChange } = this.props;
        const remarks = data.info.remarks.concat();
        const currentIdx = remarks.findIndex(r => r.creatorid === this.userid);
        remarks[currentIdx].viewer = selViewer;
        onChange(remarks);
    }

    onShowShare = (remark) => {
        const { dataSource, create, edit } = this.props;
        if (!dataSource.length) {
            message.warn('请先添加其它项目成员', 2);
            return;
        }
        if (!remark.content) {
            message.warn('请先添加备注仔设置分享', 2);
            return;
        }
        if (!(create || edit) && !remark.viewer.length) {
            message.warn('暂未分享给别人, 请点击编辑再进行分享', 2);
            return;
        }
        this.setState({ showModal: true, viewer: remark.viewer });
    }


    render() {
        const { create, edit, data, info: userInfo, col } = this.props;
        const { showModal, viewer } = this.state;
        const canEdit = create || edit;
        const remarks = data.info.remarks || [];

        let myRemark = null;
        const othersRemarks = [];
        if (remarks.length) {
            const obj = {}; // 去重处理
            remarks.forEach(v => {
                if (!obj[v.creatorid]) {
                    if (v.creatorid === this.userid) myRemark = v;
                    else othersRemarks.push(v);
                    obj[v.creatorid] = v.creatorid;
                }
            })
        }

        if (!myRemark) {
            myRemark = {
                recid: '',
                content: '',
                creatorid: this.userid,
                creatorname: userInfo.realname,
                viewer: [],
            }
        }

        let newView = [];
        let dataSource = this.props.dataSource;

        const obj = {}; // 去重处理
        viewer.forEach(v => {
            if (!obj[v.userid]) {
                newView.push(v);
                obj[v.userid] = v.userid;
            }
        })
        if (!canEdit) {
            dataSource = newView;
            newView = [];
        }

        return (
            <>
                <div className={cass(s.remarkItem, { [s.unedit]: !canEdit, [s.remarkItem1]: col === 1 })}>
                    <div className={s.lableName}>
                        <div>{create ? '备注' : '我的备注'}</div>
                        {myRemark.content ? <span onClick={() => this.onShowShare(myRemark)}>分享({myRemark.viewer.length}人)</span> : null}
                    </div>
                    {
                        canEdit ?
                            <TextArea rows={3} value={myRemark.content} onChange={this.onChange} /> :
                            <div className={s.value}>{myRemark.content || ''}</div>
                    }
                </div>
                {othersRemarks.length ? othersRemarks.map(o => (
                    <div className={cass(s.remarkItem, s.unedit, { [s.remarkItem1]: col === 1 })} key={o.creatorid}>
                        <div className={s.sharelableName}>
                            <div>{`${o.creatorname}的备注`}</div>
                            <div onClick={() => this.onShowShare(o)} className={s.share}>分享({o.viewer.length}人)</div>
                        </div>
                        <div className={s.value}>{o.content || ''}</div>
                    </div>
                )) : null}

                <ShareModal
                    canEdit={canEdit}
                    visible={showModal}
                    viewer={newView}
                    dataSource={dataSource}
                    onSure={this.onViewerChange}
                    onCancel={() => this.setState({ showModal: false })}
                />
            </>
        )
    }
}

export default ProjectRemark